<style>
    :root {
        --color-1: #1a1a2e;
        --color-2: #16213e;
        --color-3: #e94560;
        --color-4: #0f3460;
        --color-5: #f9f9f9;
        --color-6: #2d4059;
        --color-7: #ea5455;
        --color-8: #4ecca3;
    }

    body {
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        background-color: #f5f7fa;
        padding: 2rem 0;
        color: #333;
    }

    .page-title {
        text-align: center;
        margin-bottom: 2.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #eee;
    }

    .section-header {
        font-size: 1.4rem;
        margin: 3rem 0 1.5rem;
        color: #2d3748;
        padding-left: 0.5rem;
        border-left: 4px solid #3182ce;
    }

    .page-demo {
        margin-bottom: 4rem;
        position: relative;
    }

    .page-description {
        margin-top: 1rem;
        padding: 1rem;
        font-size: 0.95rem;
        color: #666;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* 全屏404页面基础样式 */
    .fullscreen-404 {
        min-height: 400px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: all 0.3s ease;
    }

    .fullscreen-404 .fullscreen-404:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .fullscreen-404 .error-code {
        font-size: 6rem;
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1;
    }

    .fullscreen-404 .error-title {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .fullscreen-404 .error-message {
        font-size: 1rem;
        max-width: 600px;
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    .fullscreen-404 .error-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .fullscreen-404 .error-btn {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
        border-radius: 6px;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
    }

    /* 不同风格404页面 */
    /* 现代简约风格 */
    .modern-simple {
        background-color: white;
        color: #2d3748;
    }

    .modern-simple .error-code {
        color: #3182ce;
    }

    /* 深色风格 */
    .dark-style {
        background-color: var(--color-1);
        color: white;
    }

    .dark-style .error-code {
        color: var(--color-3);
        text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    }

    /* 强调色风格 */
    .accent-style {
        background-color: var(--color-5);
        color: var(--color-6);
    }

    .accent-style .error-code {
        color: var(--color-7);
        position: relative;
        display: inline-block;
    }

    .accent-style .error-code::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        height: 15px;
        background-color: rgba(234, 84, 85, 0.2);
        z-index: -1;
        transform: rotate(-2deg);
    }

    /* 趣味风格 */
    .fun-style {
        background-color: white;
        color: #333;
    }

    .fun-style .error-code {
        position: relative;
        display: inline-block;
    }

    .fun-style .error-code::before {
        content: '\f128';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: -30px;
        right: -40px;
        font-size: 2rem;
        color: #f6ad55;
        transform: rotate(15deg);
    }

    /* 极简风格 */
    .minimal-style {
        background-color: white;
        color: #1a202c;
        border: 1px solid #e2e8f0;
    }

    .minimal-style .error-code {
        font-size: 8rem;
        font-weight: 900;
        color: #e2e8f0;
        margin-bottom: 0.5rem;
    }

    .minimal-style .error-title {
        font-size: 1.5rem;
        font-weight: 500;
    }

    /* 创意数字风格 */
    .creative-numbers {
        background-color: var(--color-2);
        color: white;
    }

    .creative-numbers .error-code {
        display: flex;
        gap: 10px;
    }

    .creative-numbers .digit {
        width: 80px;
        height: 120px;
        background-color: var(--color-3);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .creative-numbers .digit::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 100%
        );
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .fullscreen-404 {
            min-height: 300px;
            padding: 1.5rem;
        }

        .fullscreen-404 .error-code {
            font-size: 4rem;
        }

        .fullscreen-404 .error-title {
            font-size: 1.5rem;
        }

        .fullscreen-404 .error-actions {
            flex-direction: column;
            width: 100%;
        }

        .fullscreen-404 .error-btn {
            width: 100%;
        }

        .creative-numbers .digit {
            width: 60px;
            height: 90px;
        }
    }
</style>

<div class="container">
    <h1 class="page-title">全屏404页面样式展示</h1>

    <h2 class="section-header">基础风格404页面</h2>

    <!-- 现代简约风格404 -->
    <div class="page-demo">
        <div class="fullscreen-404 modern-simple">
            <div class="error-code">404</div>
            <div class="error-title">页面未找到</div>
            <div class="error-message">抱歉，您请求的页面不存在或已被移除。请检查您输入的网址是否正确，或返回首页重新浏览。</div>
            <div class="error-actions">
                <button class="error-btn btn-primary">返回首页</button>
                <button class="error-btn btn-outline-secondary">联系我们</button>
            </div>
        </div>
        <p class="page-description">现代简约风格404页面 - 简洁的设计，清晰的信息传达，适合大多数现代网站</p>
    </div>

    <!-- 深色风格404 -->
    <div class="page-demo">
        <div class="fullscreen-404 dark-style">
            <div class="error-code">404</div>
            <div class="error-title">页面已消失</div>
            <div class="error-message">您寻找的页面似乎已被移动或删除。别担心，您可以返回主页继续浏览，或搜索您需要的内容。</div>
            <div class="error-actions">
                <button class="error-btn" style="background-color: var(--color-3); color: white;">返回主页</button>
                <button class="error-btn" style="background-color: transparent; border: 1px solid white; color: white;">
                    搜索内容
                </button>
            </div>
        </div>
        <p class="page-description">深色风格404页面 - 深色背景搭配亮色强调，适合现代科技感网站</p>
    </div>

    <h2 class="section-header">创意风格404页面</h2>

    <!-- 强调色风格404 -->
    <div class="page-demo">
        <div class="fullscreen-404 accent-style">
            <div class="error-code">404</div>
            <div class="error-title">哎呀，页面不见了！</div>
            <div class="error-message">我们无法找到您请求的页面。可能是链接已过期，或者您输入了错误的地址。</div>
            <div class="error-actions">
                <button class="error-btn" style="background-color: var(--color-7); color: white;">回到安全地带</button>
                <button class="error-btn"
                        style="background-color: transparent; border: 1px solid var(--color-6); color: var(--color-6);">
                    查看站点地图
                </button>
            </div>
        </div>
        <p class="page-description">强调色风格404页面 - 带有装饰元素的错误代码，更具设计感</p>
    </div>

    <!-- 趣味风格404 -->
    <div class="page-demo">
        <div class="fullscreen-404 fun-style">
            <div class="error-code">404</div>
            <div class="error-title">找不到页面啦！</div>
            <div class="error-message">这个页面好像迷路了，不如回到主页重新开始探索吧！</div>
            <div class="error-actions">
                <button class="error-btn btn-success"><i class="fas fa-home me-2"></i>回首页</button>
                <button class="error-btn btn-outline-primary"><i class="fas fa-search me-2"></i>搜索</button>
            </div>
        </div>
        <p class="page-description">趣味风格404页面 - 轻松活泼的语气和装饰元素，减轻用户挫折感</p>
    </div>

    <h2 class="section-header">特殊风格404页面</h2>

    <!-- 极简风格404 -->
    <div class="page-demo">
        <div class="fullscreen-404 minimal-style">
            <div class="error-code">404</div>
            <div class="error-title">页面未找到</div>
            <div class="error-message">请求的页面不存在。</div>
            <div class="error-actions">
                <button class="error-btn btn-outline-dark">首页</button>
            </div>
        </div>
        <p class="page-description">极简风格404页面 - 极致简约的设计，只保留必要信息，适合极简主义网站</p>
    </div>

    <!-- 创意数字风格404 -->
    <div class="page-demo">
        <div class="fullscreen-404 creative-numbers">
            <div class="error-code">
                <div class="digit">4</div>
                <div class="digit">0</div>
                <div class="digit">4</div>
            </div>
            <div class="error-title">页面未找到</div>
            <div class="error-message">您访问的页面不存在或已被删除，请尝试其他页面。</div>
            <div class="error-actions">
                <button class="error-btn"
                        style="background-color: var(--color-8); color: var(--color-2); font-weight: 600;">返回首页
                </button>
                <button class="error-btn"
                        style="background-color: transparent; border: 1px solid var(--color-8); color: var(--color-8);">
                    联系支持
                </button>
            </div>
        </div>
        <p class="page-description">创意数字风格404页面 - 数字以独特方块形式呈现，视觉冲击力强</p>
    </div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 为所有404页面添加交互效果
		const errorPages = document.querySelectorAll('.fullscreen-404');
		errorPages.forEach(page => {
			// 按钮点击事件
			const buttons = page.querySelectorAll('.error-btn');
			buttons.forEach(button => {
				button.addEventListener('click', function () {
					const actionText = this.textContent.trim();
					console.log(`用户点击了：${actionText}`);

					// 添加按钮点击动画
					this.style.transform = 'scale(0.95)';
					setTimeout(() => {
						this.style.transform = 'scale(1)';
					}, 150);
				});
			});
		});

		// 页面滚动动画
		const animateOnScroll = () => {
			const demos = document.querySelectorAll('.page-demo');
			demos.forEach((demo, index) => {
				const demoTop = demo.getBoundingClientRect().top;
				const triggerBottom = window.innerHeight * 0.7;

				if (demoTop < triggerBottom) {
					demo.style.opacity = '1';
					demo.style.transform = 'translateY(0)';
				}
			});
		};

		// 初始化样式
		const demos = document.querySelectorAll('.page-demo');
		demos.forEach((demo, index) => {
			demo.style.opacity = '0';
			demo.style.transform = 'translateY(30px)';
			demo.style.transition = `opacity 0.6s ease ${index * 0.15}s, transform 0.6s ease ${index * 0.15}s`;
		});

		// 初始加载和滚动时触发动画
		window.addEventListener('load', animateOnScroll);
		window.addEventListener('scroll', animateOnScroll);
	});
</script>

    
